<template>
	<view class="page">
		<!-- #ifdef H5 -->
			<topVue title="AI微信助手" rightIcon="server-fill"></topVue>
		<!-- #endif -->
		
		<scroll-view class="main-content" scroll-y>
			<view class="bannerVue relative">
				<text class="absolute" style="left: 30rpx; bottom: 70rpx; color: #fff; font-weight: 600; font-size: 32rpx;">AI微信助手</text>
				<text class="absolute" style="left: 30rpx; bottom: 30rpx; color: #fff;font-size: 26rpx;">智能助手</text>
			</view>
			<!-- 一键体验按钮 -->
			<view class="btnVue margin30 flex-between">
				<view class="btn" @click="$u.toast('暂未开放')">一键体验</view>
				<view class="btn coopration" @click="$u.toast('暂未开放')">合作联系</view>
			</view>
			<view class="h2">了解我们</view>
			<view class="box flex-between flex-wrap">
				<view class="li">
					<image src="../../static/weChat/1.jpg"></image>
					<view class="bot">
						<view class="name">智能对话</view>
						<view class="descri">基于先进AI技术，提供智能、自然的对话体验。</view>
					</view>
				</view>
				<view class="li">
					<image src="../../static/weChat/2.jpg"></image>
					<view class="bot">
						<view class="name">多场景应用</view>
						<view class="descri">使用于客服、教育、销售等多个领域。</view>
					</view>
				</view>
				<view class="li">
					<image src="../../static/weChat/3.jpg"></image>
					<view class="bot">
						<view class="name">定制化服务</view>
						<view class="descri">根据企业需求，提供个性化AI助手解决方案。</view>
					</view>
				</view>
				<view class="li">
					<image src="../../static/weChat/4.jpg"></image>
					<view class="bot">
						<view class="name">持续学习进化</view>
						<view class="descri">不断提升算法，提升AI助手的智能水平。</view>
					</view>
				</view>
			</view>
			<!-- 案例查看 -->
			<view class="h2" style="padding: 0">案例查看</view>
			<view class="item margin30" v-for="(item, index) in 1" :key="index">
				<view class="top">新美业-若水精华液</view>
				<view class="bot flex">
					<view class="flex-1">
						<view class="descri">该AI解决微信实时客服，效果图发送，产品答疑和思域群发</view>
						<view class="lignt">亮点：多图多效果图发送</view>
						<view class="flex margin20">
							<view class="tag">AI语音对话</view>
							<view class="tag">多效果图</view>
						</view>
					</view>
					<image src="../../static/weChat/5.jpg"></image>
				</view>
			</view>
		</scroll-view>

		<!-- 底部Tabbar -->
		<u-tabbar 
			v-model="$store.state.tabbarCurrent" 
			:list="$store.state.tabbar" 
			icon-size="70" 
			height="120rpx" 
			:bg-color="bgColor" 
			active-color="#fff"
			inactive-color="#fff"
			@change="tabbarChange"
		></u-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgColor: "linear-gradient(to right, #49DC83, #3B83F4)"
			}
		},
		onLoad() {
			
		},
		methods: {
			tabbarChange(index){
				this.$store.state.tabbarCurrent = index;
				uni.setStorageSync("tabbarCurrent", index)
				uni.switchTab({
					url: this.$store.state.tabbar[index].path
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.main-content {
		width: 100%;
		height: calc(100vh - var(--window-bottom) - var(--window-top) - 212rpx);
		padding: 30rpx;
		box-sizing: border-box;
		background: linear-gradient(to bottom, #EBF3FD, #DBF8E9);
		.bannerVue {
			width: 690rpx;
			height: 400rpx;
			background: url("../../static/wechat_banner.jpeg") no-repeat;
			background-size: 100% 100%;
			border-radius: 10rpx;
		}
		
		.btnVue {
			width: 690rpx;
			height: 80rpx;
			.btn {
				width: 330rpx;
				height: 80rpx;
				text-align: center;
				line-height: 80rpx;
				color: #fff;
				border-radius: 10rpx;
				background: linear-gradient(to right, #49DC83, #3B82F6);
			}
			.coopration {
				background: linear-gradient(to right, #3B82F6, #49DC83);
			}
		}
		.h2 {
			font-weight: 700 ;
			font-size: 30rpx;
			color: #000;
			padding: 30rpx 0 20rpx 0;
		}
		.box {
			width: 100%;
			.li {
				width: 330rpx;
				height: 480rpx;
				background: #fff;
				border-radius: 12rpx;
				margin-bottom: 30rpx;
				image {
					width: 330rpx;
					height: 260rpx;
					border-radius: 12rpx 12rpx 0 0;
				}
				.bot {
					width: 330rpx;
					height: 220rpx;
					padding: 30rpx;
					.name {
						font-weight: 600;
						font-size: 30rpx;
						color: #000;
					}
					.descri {
						color: #6B97C5;
						padding-top: 10rpx;
					}
				}
			}
		}
		.item {
			width: 690rpx;
			height: 420rpx;
			background: #fff;
			border-radius: 12rpx;
			.top {
				width: 100%;
				height: 100rpx;
				border-radius: 12rpx 12rpx 0 0;
				line-height: 100rpx;
				padding-left: 20rpx;
				color: #fff;
				font-weight: 600;
				font-size: 30rpx;
				background: linear-gradient(to right, #49DC81, #3B84F3);
			}
			.bot {
				width: 100%;
				height: 320rpx;
				padding: 30rpx;
				.descri {
					color: #968082;
				}
				.lignt {
					color: #968082;
					padding-top: 15rpx;
				}
				.tag {
					width: 150rpx;
					height: 50rpx;
					line-height: 50rpx;
					text-align: center;
					background: #FCE7F3;
					color: #A6326E;
					margin-right: 15rpx;
					border-radius: 12rpx;
					font-size: 24rpx;
				}
				image {
					width: 220rpx;
					height: 100%;
					border-radius: 12rpx;
					margin-left: 30rpx;
				}
			}
		}
	}
</style>
